<template>
  <div class="my">
    <div class="top_layout">
      <!-- 顶部设置菜单容器 -->
      <div class="top_setting_layout">
        <!-- 设置菜单图标 -->
        <div class="setting" @click="goSetUserInfo"></div>
      </div>

      <!-- 头像 -->
      <div class="headPortraitLayout">
        <div class="headPortraitBackground"></div>
        <div
          class="headPortrait"
          :style="{ backgroundImage: 'url(' + info.picture + ')' }"
        ></div>
      </div>

      <!-- 未报名展示内容 -->
      <span class="noShoolSpan" v-if="!ifShool">你还未报名学习</span>

      <!-- 已报名展示内容 -->
      <div class="shoolContextLayout" v-else>
        <div class="shoolContext">
          <!-- 班级信息第一行 -->
          <div class="shoolContextRow1">
            <span>{{ shoolClassName }}</span>
          </div>
          <!-- 班级信息第二行 -->
          <div class="shoolContextRow2">
            <span>班群: {{ shoolClassNumber }}</span>
            <span>班主任: {{ shoolClassTeacherName }}</span>
          </div>
          <!-- 班级信息第三行 -->
          <div class="shoolContextRow3">
            <span>班级阶段: {{ shoolClassStage }}</span>
            <span>助教: {{ assistant }}</span>
          </div>
        </div>
      </div>
    </div>

    <div
      class="line"
      style="width: 21.5625rem; height: 1px; background-color: #B7B7B7; margin: 0 auto; margin-top: 0.9375rem; opacity: 0.5;"
    ></div>

    <!-- 菜单列表 -->
    <div class="menuListLayout">
      <div class="menuItem balanceLayout" v-on:click="goView('Balance')">
        <div class="titleLayout">
          <div
            class="icon"
            style="background-image: url('https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/balance.png');"
          ></div>
          <div class="titleText">余额</div>
        </div>
        <div class="rightText">{{ info.money }}元</div>
      </div>

      <div class="menuItem balanceLayout" v-if="info.consult == -1">
        <div class="titleLayout">
          <div
            class="icon"
            style="background-image: url('https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/free_lessons.png');"
          ></div>
          <div class="titleText">免费课</div>
        </div>
        <div class="rightText">{{ info.free }}节</div>
      </div>
      <div
        class="menuItem balanceLayout"
        @click="goProductList('全部分类')"
        v-else
      >
        <div class="titleLayout">
          <div
            class="icon"
            style="background-image: url('https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/free_lessons.png');"
          ></div>
          <div class="titleText">免费课</div>
        </div>
        <div class="rightText">
          <span class="free-class">{{ info.free }}节</span>
          <span class="vertical-bar"></span>
          <span class="free-cost"
            >还差<span>￥{{ info.consult }}</span
            >兑换免费课</span
          >
          <span class="free-click"></span>
        </div>
      </div>

      <div class="menuItem balanceLayout" @click="goView('MyOrder')">
        <div class="titleLayout">
          <div
            class="icon"
            style="background-image: url('https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/my_order.png');"
          ></div>
          <div class="titleText">我的订单</div>
        </div>
        <div class="rightText"></div>
      </div>
      <div class="menuItem balanceLayout" v-on:click="goView('InviteFriends')">
        <div class="titleLayout">
          <div
            class="icon"
            style="background-image: url('https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/friend.png');"
          ></div>
          <div class="titleText">邀请好友</div>
        </div>
        <div class="rightText"></div>
      </div>
      <div class="menuItem balanceLayout" v-on:click="goView('Friend')">
        <div class="titleLayout">
          <div
            class="icon"
            style="background-image: url('https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/share.png');"
          ></div>
          <div class="titleText">我的团队</div>
        </div>
        <div class="rightText"></div>
      </div>
      <div class="menuItem balanceLayout" v-on:click="goView('MyClass')">
        <div class="titleLayout">
          <div
            class="icon"
            style="background-image: url('https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/my_class.png');"
          ></div>
          <div class="titleText">我的班级</div>
        </div>
        <div class="rightText"></div>
      </div>
      <div
        class="menuItem balanceLayout"
        v-if="info.is_teach == 1"
        v-on:click="goView('Assistant')"
      >
        <div class="titleLayout">
          <div
            class="icon"
            style="background-image: url('https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/assistant.png');"
          ></div>
          <div class="titleText">助教</div>
        </div>
        <div class="rightText"></div>
      </div>
      <div
        class="menuItem balanceLayout"
        v-if="info.is_errand == 1"
        @click="goView('Distribution')"
      >
        <div class="titleLayout">
          <div
            class="icon"
            style="background-image: url('https://jpanese-project.oss-cn-chengdu.aliyuncs.com/public/run_man.png');"
          ></div>
          <div class="titleText">跑腿配送</div>
        </div>
        <div class="rightText"></div>
      </div>
    </div>
    <div style="height: 4.5625rem;"></div>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      ifShool: true,
      shoolClassName: "入门级1班",
      shoolClassTeacherName: "王老师",
      shoolClassNumber: "5213265484",
      shoolClassStage: "0 / 8",
      assistant: "张三丰",
      info: []
    };
  },
  created() {
    this.selectMyUserList();
  },
  methods: {
    goView(path) {
      console.log(path);
      this.$router.push({
        name: path
      });
    },
    // 到商城全部
    goProductList(val) {
      localStorage.name = val;
      //到列表
      //console.log(val);
      this.$router.push({
        name: "ProductList",
        params: { name: val }
      });
      Indicator.open({ spinnerType: "fading-circle" });
    },
    goSetUserInfo() {
      //到 个人设置
      this.$router.push({
        name: "SetUpInfo"
      });
    },
    selectMyUserList() {
      //个人中心
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/home/index",
          { uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.ifShool = kun.data.stare;
            me.shoolClassName = kun.data.name;
            me.shoolClassTeacherName = kun.data.teacher;
            me.shoolClassNumber = kun.data.group;
            me.shoolClassStage = kun.data.plan + "/" + kun.data.phase;
            me.assistant = kun.data.teaching;
            me.info = kun.data;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.top_layout {
  width: 100%;
  height: 14rem;
  padding-top: 0.9375rem;
  background: rgb(229, 40, 78);
  /* Old browsers */
  background: -moz-linear-gradient(
    top,
    rgb(229, 40, 78) 35%,
    rgb(255, 128, 96) 74%,
    rgb(255, 128, 96) 75%,
    rgb(255, 255, 255) 75%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgb(229, 40, 78) 35%,
    rgb(255, 128, 96) 74%,
    rgb(255, 128, 96) 75%,
    rgb(255, 255, 255) 75%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgb(229, 40, 78) 35%,
    rgb(255, 128, 96) 74%,
    rgb(255, 128, 96) 75%,
    rgb(255, 255, 255) 75%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5284e', endColorstr='#ffffff', GradientType=0);
  /* IE6-9 */

  // 顶部设置容器
  .top_setting_layout {
    display: flex;
    flex-direction: row-reverse;

    // 顶部设置图标
    .setting {
      width: 1.375rem;
      height: 1.375rem;
      margin-right: 0.9375rem;
      background-image: url(../../assets/setting.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }

  // 头像区容器
  .headPortraitLayout {
    height: 5.1875rem;

    // 头像的透明边缘背景
    .headPortraitBackground {
      width: 5.1875rem;
      height: 5.1875rem;
      margin: 0 auto;
      border-radius: 50%;
      background-color: #f87870;
      opacity: 0.5;
    }

    // 头像
    .headPortrait {
      width: 4.25rem;
      height: 4.25rem;
      border-radius: 50%;
      margin: 0 auto;
      background-image: url(../../assets/head_portrait.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
      position: relative;
      top: -4.71875rem;
    }
  }

  // 未报名学习的文字
  .noShoolSpan {
    display: block;
    text-align: center;
    margin-top: 2.1875rem;
    font-size: 0.9375rem;
    color: #333333;

    width: 21.5625rem;
    height: 6.875rem;
    margin: 0 auto;
    margin-top: 0.625rem;
    background-color: #ffffff;
    border-radius: 0.3125rem;
    box-shadow: 0rem 0.1875rem 0.75rem rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // 已报名的展示内容
  .shoolContextLayout {
    width: 21.5625rem;
    height: 6.875rem;
    margin: 0 auto;
    margin-top: 0.625rem;
    background-color: #ffffff;
    border-radius: 0.3125rem;
    box-shadow: 0rem 0.1875rem 0.75rem rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      color: #343434;
      font-size: 0.9375rem;
      line-height: 0.9375rem;
    }

    .shoolContext {
      width: 15.625rem;
    }

    .shoolContextRow1 {
      text-align: center;
    }

    .shoolContextRow2 {
      display: flex;
      justify-content: space-between;
      margin-top: 0.625rem;
    }

    .shoolContextRow3 {
      display: flex;
      justify-content: space-between;
      margin-top: 0.625rem;
    }
  }
}

//菜单列表容器
.menuListLayout {
  width: 21.5625rem;
  margin: 0 auto;
  margin-top: 1rem;
  padding-bottom: 0.625rem;

  //菜单栏
  .menuItem {
    width: 21.5625rem;
    height: 3.125rem;
    margin: 0 auto;
    margin-top: 0.625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    border-radius: 0.3125rem;
    box-shadow: 0rem 0rem 0.625rem rgba(0, 0, 0, 0.05);
    font-size: 0.9375rem;
    color: #333333;

    //菜单标题和图标的容器
    .titleLayout {
      margin-left: 0.625rem;
      display: flex;
      align-items: center;

      //菜单图标
      .icon {
        width: 1.25rem;
        height: 1.75rem;
        background-image: url(../../assets/balanceIcon.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        overflow: hidden;
      }

      //菜单名称
      .titleText {
        margin-left: 0.625rem;
      }
    }

    //菜单右侧数据
    .rightText {
      margin-right: 0.625rem;
      font-size: 0.8125rem;
      color: #999999;
    }
  }
}
//免费节
.free-class {
  position: relative;
  top: -0.5625rem;
}
// 竖线
.vertical-bar {
  width: 0.125rem;
  height: 1.875rem;
  background: #f0f0f0;
  border-radius: 0.0625rem;
  display: inline-block;
  margin: 0 0.59375rem;
}
// 兑换免费课
.free-cost {
  position: relative;
  top: -0.5625rem;
}
.free-cost span {
  color: #f6625a !important;
}
//向右点击
.free-click {
  position: relative;
  top: -0.5rem;
  margin-left: 1.46875rem;
  display: inline-block;
  width: 0.375rem;
  height: 0.8125rem;
  background-image: url(../../assets/shop/toRight.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  overflow: hidden;
}
</style>
